import React, {Component} from 'react';
import Platform from 'Platform';
import {StyleSheet, Text, View, Dimensions, Navigator} from 'react-native';
import MyCarousel from '../components/Carousel';
import Colloction from '../components/Colloction';
import * as types from '../constants/CollectionButtonTypes';
import * as setting from '../constants/ShortcutPageSetting';
import { connect } from 'react-redux';


export class MainContainer extends Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps.title);
    if(nextProps.container !== undefined && nextProps.container !== 'none') {
      console.log(nextProps.container);
      console.log(this.props.container);
      if (nextProps.container === types.SHORTCUTCOLLECTION) {
          console.log('跳转');
          this.props.actions.shortcutDetail({
            titie: nextProps.title,
          })
      }
    }
    return true;
  }
  render() {
    return (
      <View style={styles.view}>
        <View style={styles.topView}></View>
        <Colloction type={types.SHORTCUTCOLLECTION} data={setting.QUICKPAGESETTING}/>
      </View>
    );
  }
}

export class ShortcutNavigator extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Navigator 
      initialRoute={{title: 'shortcut', component: ShortcutContainer}}
      renderScene={(route, navigator) => {
          let Component = route.component;
          return <Component {...route} navigator={navigator}/>
      }}/>
    )
  }
}

let deviceWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
  view: {
    flex: 1,
  },
  topView: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    backgroundColor: 'blue',
    height: 170,
  }
});


export default connect()(MainContainer);